<template>
  <div style="width: auto;height: 350px" ref='pieChart'>
  </div>
</template>

<script>
import {
  totalDataByQy
} from '@/api/dashboard/Analysis'
export default {
  name: 'echarts4',
  data () {
    return {
      piedata:[] ,
      totalNum : 0 ,
    }
  },
  mounted () {
    this.getPieData()
  },
  methods: {
    //获取平台用户数据
    getPieData(){
      totalDataByQy({wslx:1}).then(res=>{
        this.piedata= res.result
        this.totalNum = this.piedata.length ;
        this.getStripChart();
      })
    },
    getStripChart(){
      const chart = this.$refs.pieChart
      const myChart = this.$echarts.init(chart)
      let that = this ;
      let option;
      option =  {
        // 环形图中间默认显示文字
        title: {
          text: `{a|企业总数}\n\n{b|${this.totalNum}}`,
          top: 'middle',
          left: '20%',
          textStyle: {
            rich: {
              a: {
                fontSize: 22,
                padding: [0, 0, 0, 190],
                color: 'rgba(0,0,0,0.65)'
              },
              b: {
                fontSize: 26,
                padding: [0, 0, 0, 210],
                color: 'rgba(0,0,0,0.85)'
              }
            }
          }
        },
        tooltip: {
          backgroundColor: '#fff',
          extraCssText: 'box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15);',
          padding: [12, 16, 12, 16],
          textStyle: {
            color: 'rgba(0,0,0,0.65)'
          },
          // 悬浮的位置可以调整，总距离左边10px
          position: (point) => {
            return ['10', point[1]]
          },
          formatter: (param) => {

            let {marker, name, value, data} = param
            let result = `<div style='text-align: left'><div>${marker}${name}</div>`
            result += `<div>报税人数：${value} 人</div>`
            result += `<div>结算金额：${data.jsjeNum} 元</div>`
            result += `<div>代征税额：${data.ydzseNum} 元</div>`
            result += `<div>实缴税额：${data.sjseNum} 元</div></div>`
            return result
          }
        },
        legend: {
          orient: 'vertial',
          itemWidth: 8,
          itemHeight: 8,
          right: 200,
          bottom: '25%',
          data: this.piedata,
          textStyle: {
            color: 'rgba(0,0,0,0.65)'
          },
          formatter: (name) => {
            const value = that.piedata.find(item => item.name === name).value
            return `${name}：报税 ${value} 人`
          }
        },
        color: ['#4168ff', '#47CBFF', '#FF7A33', '#45DE7F', '#FFAC34', '#5AD7D8', '#8163E9', '#FF5F45', '#01C581', '#B754F6', '#FCDA0F', '#9B501B', '#A0D911', '#2998FF', '#938BF8'],
        series: [{
          name: '企业总数',
          type: 'pie',
          radius: ['50%', '70%'],
          center: ['40%', '50%'], // 图形位置
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: '#fff',
            borderWidth: 2
          },
          label: { // 鼠标悬浮具体数据显示
            show: false
          },
          data: this.piedata
        }]
      } ;
      option && myChart.setOption(option);
    }

  }
}
</script>

<style scoped>

</style>